﻿.mcn-dataform {
    @blocspace: 5px;

    input, select, textarea {
        box-sizing: border-box;

        &.error, &.error:invalid, &:invalid {
            border-color: #fa6c6c;
        }
    }

    p {
        margin-top: 0;
        margin-bottom: @blocspace;

        > label {
            font-weight: bold;
            font-size: 0.9em;
        }

        &.actions {
            text-align: right;
        }
    }

    .controlgroup {
        display: block;

        label {
            display: inline;
        }

        input[type=radio], input[type=checkbox] {
            width: auto;
            background-color: transparent;
        }

        input[type=text], input[type=number], input[type=email], select, textarea {
            width: 100%;
        }
    }

    .grid {
        display: -ms-grid;
        -ms-grid-rows: auto;

        .col1 {
            -ms-grid-column: 1;
        }

        .col2 {
            -ms-grid-column: 3;
        }

        .col3 {
            -ms-grid-column: 5;
        }

        .col4 {
            -ms-grid-column: 7;
        }

        .col5 {
            -ms-grid-column: 9;
        }
    }

    .grid1-1 {
        -ms-grid-columns: 1fr @blocspace 1fr;
    }

    .grid1-2 {
        -ms-grid-columns: 1fr @blocspace 2fr;
    }

    .grid2-1 {
        -ms-grid-columns: 2fr @blocspace 1fr;
    }

    .grid1-1-1 {
        -ms-grid-columns: 1fr @blocspace 1fr @blocspace 1fr;
    }

    &.form-vertical {
        p {
            > label {
                display: block;
            }

            > input, > select, > textarea {
                width: 100%;
            }
        }
    }

    &.form-horizontal {
        &.label60 label {
            width: 60px;
        }

        &.label80 label {
            width: 80px;
        }

        &.label100 label {
            width: 100px;
        }

        &.label120 label {
            width: 100px;
        }

        &.label140 label {
            width: 100px;
        }

        &.label160 label {
            width: 100px;
        }

        &.label180 label {
            width: 100px;
        }

        > p {
            display: -ms-grid;
            -ms-grid-rows: auto;
            -ms-grid-columns: auto 1fr auto;

            &.actions {
                display: block;
            }

            > label {
                display: block;
                -ms-grid-column: 1;
                -ms-grid-column-align: start;
                margin-top: 0.35em;
                margin-right: 10px;
                text-align: right;
            }

            > input, > select, > textarea, > .controlgroup {
                width: 100%;
                -ms-grid-column: 2;
            }
        }
    }
}

.tooltipster-error {
    border-radius: 2px;
    border: 1px solid #e41717;
    background: #c32f2f;
    color: #fff;

    .tooltipster-content {
        font-family: Segoe UI, Arial, sans-serif;
        font-size: 14px;
        line-height: 16px;
        padding: 8px 10px;
        overflow: hidden;
    }
}

.tooltipster-help {
    border-radius: 2px;
    border: 1px solid #7a7ad1;
    background: #6464b0;
    color: #fff;

    .tooltipster-content {
        font-family: Segoe UI, Arial, sans-serif;
        font-size: 14px;
        line-height: 16px;
        padding: 8px 10px;
        overflow: hidden;
    }
}

.mcn-cordova.mcn-dataform.form-horizontal > p {
    display: flex;
}
